<template>
  <view style="width:100%;height:calc(100vh - 304rpx);overflow:auto">
    <view class="address_box" v-for="(item, index) in props.addressList" :key="index" v-if="props.addressList.length">
      <view class="info" @click="emit('goSendGoods', item)">
        <p class="name"><span>{{ item.preName }}&nbsp;</span><span>{{ item.preTel }}</span></p>
        <p class="address"><span>{{ item.preAddress }}</span></p>
      </view>
      <view class="default">
        <view>
          <!--                    <nut-radio :label="item.btcaId">设为默认地址</nut-radio>-->
          <nut-checkbox v-model="item.isDefaultBool" label="复选框" @change="doChange(item)"
          >设为默认地址</nut-checkbox>
        </view>
        <span class="set">
          <view @click.stop="emit('doEdit', item)" style="display: flex;align-items: center">
            <image class="img" src="../../../assets/images/index/icon_edit.png"></image>
            <text>编辑</text>
          </view>
          <view @click.stop="emit('doDelete', item.btcaId)" style="display: flex;align-items: center;margin-left: 48rpx">
            <image class="img" src="../../../assets/images/index/icon_delete.png"></image>
            <text>删除</text>
          </view>
        </span>
      </view>
    </view>
    <nut-empty description="暂无数据" v-else></nut-empty>
  </view>
</template>

<script setup lang='ts'>
import { AddressInfo } from '@/@api/AddressInfo';
import { Del, Edit } from '@nutui/icons-vue-taro';
import { ref, watch, defineProps, defineEmits, computed } from 'vue';

const props = defineProps<{
    addressList: AddressInfo[]
    isdefault: string
}>()
const emit = defineEmits<{
    (e: 'goSendGoods', args: AddressInfo)
    (e: 'doEdit', args: AddressInfo)
    (e: 'doDelete', args: string)
    (e: 'doChange', args: string)
}>()


const defaultValue = ref('')

watch(() => props.isdefault, (newVal) => {
    if (newVal) {
        defaultValue.value = props.isdefault
    }
})

// 更改默认地址
function doChange(item:any) {
    emit('doChange', item)
}

</script>

<style lang="scss">
.address_box {
  width: 700rpx;
  box-sizing: border-box;
  margin-left: 25rpx;
  margin-top: 16rpx;
  &:last-child{ margin-bottom: 16rpx; }
  background-color: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx 0 24rpx;

  .info {
    .name {
      display: flex;
      font-size: 32rpx;
      color: #252525;
      font-weight: bold;
    }
    .address {
      margin-top: 16rpx;
      font-size: 24rpx;
      color: #666;
    }
  }



  .default {
    height: 80rpx;
    margin-top: 32rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 24rpx;
    .nut-checkbox__label {
      margin-left: 10rpx;
      font-size: 24rpx;
      color: #666666;
    }

    .set {
      display: flex;
      align-items: center;
      color: #666;
      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
